import { useAppDispatch, useAppSelector } from "@/store/hooks";
import { changeModal, getNoticeAsync } from "@/store/notice/noticeSlice";
import { Form, Input, Modal, Select, DatePicker } from "antd";
import { useEffect, useState, type ReactElement } from "react";
import dayjs from "@/utils/dayjs";
import { TZ } from "@/utils/env";
import { createNotice, updateNotice } from "@/store/notice/noticeAPI";

const { RangePicker } = DatePicker;

export default function Create(): ReactElement<typeof Modal, "div"> {
  const [loading, setLoading] = useState<boolean>(false);
  const { modal, params } = useAppSelector((state) => state.notice);
  const {
    config: { data: { data: { announce_type_map = [], announce_stat_map = [] } = {} } = {} } = {},
  } = useAppSelector((state) => state.app);
  const dispatch = useAppDispatch();
  const [form] = Form.useForm();

  const handleClose = () => {
    dispatch(changeModal({ open: false }));
    form.resetFields();
  };

  const handleOk = async () => {
    try {
      const values = await form.validateFields();
      setLoading(true);
      const p = {
        ...values,
        announce_start: values.time[0].unix(),
        announce_end: values.time[1].unix(),
      };
      delete p.time
      if (modal.type === "create") {
        createNotice(p)
          .then(() => {
            handleClose();
            dispatch(getNoticeAsync({ ...params }));
          })
          .finally(() => setLoading(false));
      } else if (modal.type === "update") {
        p.announce_id = modal.record?.announce_id;
        updateNotice(p)
          .then(() => {
            handleClose();
            dispatch(getNoticeAsync({ ...params }));
          })
          .finally(() => setLoading(false));
      }
    } catch (err) {
      console.log("校验不通过");
    }
  };

  useEffect(() => {
    if (modal.open && modal.type === "update") {
      form.setFieldsValue(modal.record);
      form.setFieldValue('time', [dayjs.unix(modal.record?.announce_start as number).tz(TZ), dayjs.unix(modal.record?.announce_end as number).tz(TZ)])
      form.setFieldValue('announce_status', modal.record?.status)
    }
  }, [modal]);

  return (
    <Modal
      open={modal.open}
      title={modal.type === "create" ? "创建" : "编辑"}
      onCancel={handleClose}
      onOk={handleOk}
      confirmLoading={loading}
    >
      <Form form={form}>
        <Form.Item
          name="en_title"
          rules={[{ required: true, message: "必填" }]}
          label="英语标题"
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="en_content"
          rules={[{ required: true, message: "必填" }]}
          label="英语内容"
        >
          <Input.TextArea autoSize={{ minRows: 4 }} />
        </Form.Item>
        <Form.Item
          name="pt_title"
          rules={[{ required: true, message: "必填" }]}
          label="葡语标题"
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="pt_content"
          rules={[{ required: true, message: "必填" }]}
          label="葡语内容"
        >
          <Input.TextArea autoSize={{ minRows: 4 }} />
        </Form.Item>
        <Form.Item
          name="announce_type"
          rules={[{ required: true, message: "必填" }]}
          label="公告类型"
        >
          <Select options={announce_type_map} />
        </Form.Item>
        <Form.Item
          name="time"
          rules={[{ required: true, message: "必填" }]}
          label="公告发布时间"
          initialValue={[dayjs().tz(TZ).subtract(3, "day"), dayjs().tz(TZ)]}
        >
          <RangePicker showTime />
        </Form.Item>
        <Form.Item
          name="announce_status"
          rules={[{ required: true, message: "必填" }]}
          label="公告状态"
        >
          <Select
            options={announce_stat_map.filter(i => i.value !== 2)}
          />
        </Form.Item>
      </Form>
    </Modal>
  );
}
